<template>
  <div>
    <nav-header title="搜索"></nav-header>
    <!-- 搜索框 -->
    <div class="map">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <!-- 搜索历史 -->
      <div class="lis">
        <span class="lis01">历史记录</span>
        <span class="lis02" v-if="this.list.length > 0" @click="removeall()"
          >全部删除</span
        >
      </div>
      <div class="sech">
        <ul>
          <li v-for="(item, index) in list" :key="index">
            <p class="text" @click="value = item">{{ item }}</p>
            <van-icon name="close" size="20px" @click="removeList(index)" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import NavHeader from "../../components/Nav-Header.vue";
import { Search } from "vant";
export default {
  name: "App03Search",
  components: {
    [Search.name]: Search,

    NavHeader,
  },
  data() {
    return {
      value: "",
      list: [],
      // text:''
    };
  },

  mounted() {
    this.getnewList();
  },

  methods: {
    onSearch() {
      this.$axios
        .post("/api/search", {
          key_word: this.value,
          skip: 0,
          limit: 20,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            let item = res.data;
            localStorage.setItem("searchlist", JSON.stringify(item));
            this.$router.push("/detail");
            // 上传数据
            // console.log(this.value)
            // console.log(this.list);
            let flag = this.list.every((v) => v != this.value);
            let i = this.list.indexOf(this.value)
            console.log(i);
            if (flag) {
              // this.list.unshift(this.value);
              localStorage.setItem("oldlist", JSON.stringify(this.list));
              this.getnewList();
            } else {
              // for (let i = 0; i <= this.list.length; i++) {
              this.list.splice(i, 1);
              // this.list.unshift(this.value);
              localStorage.setItem("oldlist", JSON.stringify(this.list));
              this.getnewList();
              // }
            }

            this.list.unshift(this.value);
            localStorage.setItem("oldlist", JSON.stringify(this.list));
            // console.log(this.list)
          }
        });
    },
    // 传新数据
    getnewList() {
      let old = JSON.parse(localStorage.getItem("oldlist"));
      if (old == null) {
        this.list = [];
      } else {
        this.list = old;
      }
      // console.log(this.newlist);
      // this.newlist.unshift(this.value)
      // console.log(this.list)
    },
    // 删除记录
    removeList(index) {
      this.list = JSON.parse(localStorage.getItem("oldlist"));
      this.list.splice(index, 1);
      localStorage.setItem("oldlist", JSON.stringify(this.list));
      // console.log(this.list)
    },
    // 删除全部数据
    removeall() {
      this.list = JSON.parse(localStorage.getItem("oldlist"));
      this.list = [];
      localStorage.setItem("oldlist", JSON.stringify(this.list));
      // console.log(this.list)
    },
  },
};
</script>

<style lang="scss" scoped>
.map{
  margin-top: 55px;
.lis {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 20px;
  font-size: 15px;
  color: rgb(204, 204, 204);
  line-height: 20px;

  .lis01 {
    margin-left: 20px;
  }

  .lis02 {
    margin-right: 20px;
  }
}

.sech {
  width: 100%;
  text-align: center;
  margin-top: 20px;

  ul {
    width: 85%;
    display: block;
    margin: auto;

    li {
      display: block;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgb(204, 204, 204);
      margin-top: 10px;
      // padding-bottom: 10px;

      .text {
        font-size: 18px;
      }
    }
  }
}
}
</style>